<!DOCTYPE html>
<html>
  <head>
    <title>Page One</title>
    <style>
      .col { display: inline-block }
    </style>
    <script src="karate.js"></script>
    <script>
      setTimeout(function(){ karate.setHtml('eg01WaitParentId', '<div id="eg01WaitId">APPEARED!</div>') }, 5000);
      function keyPressed(e, t){ var div = karate.get('eg02DivId'); var v = div.innerHTML + e.keyCode + t; div.innerHTML = v }
    </script>
  </head>
  <body>
    <div id="eg01">
      <div>
        <span class="col">Input Right</span>
        <input name="eg01InputName" id="eg01InputId" type="text" class="col"/>
      </div>      
      <input id="eg01DisabledId" type="text" disabled="true" />
      <input name="eg01SubmitName" id="eg01SubmitId" type="submit" onclick="karate.setHtml('eg01DivId', karate.get('eg01InputId').value)" />
      <div id="eg01DivId"></div>
      <div id="eg01WaitParentId"></div>
    </div>
    <div id="eg02">      
      <input name="eg02InputName" id="eg02InputId" type="text" onkeydown="return keyPressed(event, 'd')" onkeyup="return keyPressed(event, 'u')"/>
      <div id="eg02DivId"></div>   
    </div>
  </body>
</html>